﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>百度地图示例</title>
    <!-- 引入百度地图API -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=PwXtnuGJA1NQFt5DjciuZLNINNKy0cVj"></script>
    <style>
        #map-container {
            width: 800px;
            height: 500px;
            margin: 20px auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h2>百度地图示例</h2>
    <div id="map-container"></div>

    <script type="text/javascript">
        // 初始化地图
        var map = new BMap.Map("map-container");
        // 设置中心点（北京天安门）
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 15); // 15表示缩放级别

        // 添加地图控件
        map.addControl(new BMap.NavigationControl());  // 缩放平移控件
        map.addControl(new BMap.ScaleControl());      // 比例尺控件
        map.enableScrollWheelZoom();                  // 允许鼠标滚轮缩放

        // 添加标记
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);

        // 可选：信息窗口
        var infoWindow = new BMap.InfoWindow("这里是北京天安门");
        marker.addEventListener("click", function() {
            this.openInfoWindow(infoWindow);
        });
    </script>
</body>
</html>